---
title: "Justify Items"
# description: "Utilities for controlling how grid items are aligned along their inline axis."
description: "用于控制网格项目如何沿其内联轴对齐的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/justifyItems'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Auto

<!-- Use `justify-items-auto` to justify grid items automatically on their inline axis: -->
使用 `justify-items-auto` 在其内联轴上自动对网格项目进行调整。

```html emerald
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-auto h-32">
    <div class="text-white text-2xl font-extrabold rounded-lg bg-emerald-500 flex justify-center items-center">1</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-emerald-500 flex justify-center items-center">2</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-emerald-500 flex justify-center items-center">3</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-emerald-500 flex justify-center items-center">4</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-emerald-500 flex justify-center items-center">5</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-emerald-500 flex justify-center items-center">6</div>
  </div>
</template>

<div class="grid **justify-items-auto** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Start

<!-- Use `justify-items-start` to justify grid items against the start of their inline axis: -->
使用 `justify-items-start` 使网格项目沿内联轴的起点排列。

```html indigo
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-start h-32">
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">1</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">2</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">3</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">4</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">5</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-indigo-500 flex justify-center items-center w-16">6</div>
  </div>
</template>

<div class="grid **justify-items-start** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## End

<!-- Use `justify-items-end` to justify grid items against the end of their inline axis: -->
使用 `justify-items-start` 使网格项目沿内联轴的终点排列。

```html lightBlue
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-end h-32">
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">1</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">2</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">3</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">4</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">5</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-light-blue-500 flex justify-center items-center w-16">6</div>
  </div>
</template>

<div class="grid **justify-items-end** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Center

<!-- Use `justify-items-center` to justify grid items along their inline axis: -->
使用 `justify-items-center` 使风格项目沿着他们的内联轴对齐。

```html amber
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-center h-32">
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">1</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">2</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">3</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">4</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">5</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-amber-500 flex justify-center items-center w-16">6</div>
  </div>
</template>

<div class="grid **justify-items-center** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Stretch

<!-- Use `justify-items-stretch` to stretch items along their inline axis: -->
使用 `justify-items-stretch` 沿其内联轴拉伸项目。

```html fuchsia
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-stretch h-32">
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">1</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">2</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">3</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">4</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">5</div>
    <div class="text-white text-2xl font-extrabold rounded-lg bg-fuchsia-500 flex justify-center items-center">6</div>
  </div>
</template>

<div class="grid **justify-items-stretch** ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To justify flex items at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:justify-items-center` to apply the `justify-items-center` utility at only medium screen sizes and above. -->
要在特定的断点处对 flex 项目应用 justify 功能类，请在任何现有的功能类前添加 `{screen}:` 前缀。例如，使用 `md:justify-items-center` 来仅在中等尺寸以上的屏幕应用 `justify-items-center` 功能类。

```html
<div class="justify-items-start md:justify-items-center">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="justifyItems" name="justify-items" />

### 禁用

<Disabling plugin="justifyItems" name="justify-items" />
